<template>
  <el-row>
    <el-col :span="6">
      <div style="padding: 20px;height: 500px;overflow-y: auto;">
        <el-tree :data="listData" @node-click="handleNodeClick" />
      </div>
    </el-col>
    <el-col :span="18">
      222222
    </el-col>
  </el-row>
</template>

<script>
import { getProduction } from '@/api/mhm/productionSiteManage'
import { getReservoir } from '@/api/mhm/reservoirAreaManage'
import { getStorage } from '@/api/mhm/storageAreaManage'
export default {
  name: 'PlantComprehensiveMonitoring',
  data() {
    return {
      listData: [
        {
          label: '储罐区',
          name: 1,
          children: []
        },
        {
          label: '库区',
          name: 2,
          children: []
        },
        {
          label: '生产场所',
          name: 3,
          children: []
        }
      ]
    }
  },
  created() {
    const promise1 = getStorage()
    const promise2 = getReservoir()
    const promise3 = getProduction()
    Promise.all([promise1, promise2, promise3]).then(res => {
      this.listData[0].children = res[0].content.map(element => {
        element.label = element.storageAreaName
        return element
      })
      this.listData[1].children = res[1].content.map(element => {
        element.label = element.reservoirAreaName
        return element
      })
      this.listData[2].children = res[2].content.map(element => {
        element.label = element.unitName
        return element
      })
    })
  },
  methods: {
    handleNodeClick(data) {
      data.id ? console.log(data.id) : ''
    }
  }
}
</script>

<style scoped>

</style>
